<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <script src="./js/vue2.js"></script>
    <script src="./js/axios.min.js"></script>
    <style>
        h1,div{
            text-align: center;
        }
        table{
            margin: 10px auto;
        }
        a{
            padding: 3px;
        }
    </style>
</head>
<body>
    <div id="app">
        <h1>园区门禁管理系统</h1>
        <div>
            <select v-model="querybuildingId">
                <option :value="null">---请选择---</option>
                <option v-for="item in buildings" :key="item.id" :value="item.id">
                    {{item.name}}
                </option>
            </select>
            <button @click="handlePageClick(1)">查询</button>
            <a href="add.html">添加</a>
        </div>
        <table border="1" width="800">
            <thead>
                <tr>
                    <th>id</th>
                    <th>负责人</th>
                    <th>供应商</th>
                    <th>品牌</th>
                    <th>所属楼宇</th>
                    <th>安装日期</th>
                    <th>运行状态</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in devices" :key="item.id">
                    <td>{{item.id}}</td>
                    <td>{{item.principal}}</td>
                    <td>{{item.supplier}}</td>
                    <td>{{item.brand}}</td>
                    <td>{{item.buildingName}}</td>
                    <td>{{item.addTime}}</td>
                    <td>{{item.status==1?'启用':'停用'}}</td>
                    <td>
                        <button v-if="item.status==0" @click="handleUpdateClick(item.id,1)">启用</button>
                        <button v-else @click="handleUpdateClick(item.id,0)">停用</button>
                    </td>
                </tr>
            </tbody>
        </table>
        <p>
            <a @click="handlePageClick(1)" href="javascript:void(0)">首页</a>
            <a @click="handlePageClick(pageIndex-1)" href="javascript:void(0)">上一页</a>
            <a v-for="item of pageCount" @click="handlePageClick(item)" href="javascript:void(0)">
                {{item}}
            </a>

            <a @click="handlePageClick(pageIndex+1)" href="javascript:void(0)">下一页</a>
            <a @click="handlePageClick(pageCount)"  href="javascript:void(0)">末页</a>
             第{{pageIndex}}页/共{{pageCount}}页
        </p>
    </div>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                buildings:[],
                devices:[],
                querybuildingId:null,
                pageCount:0,
                pageIndex:1,
            },
            methods:{
                loadbuildings(){
                    axios.get('http://localhost:8080/building/all')
                        .then(res => {
                            this.buildings = res.data.data
                        })
                },
                querydevices(){
                    axios.get('http://localhost:8080/device/query',{
                        params: {
                            buildingId:this.querybuildingId,
                            pageIndex:this.pageIndex
                        }
                    })
                        .then(res => {
                            this.devices = res.data.data.list
                            this.pageCount = res.data.data.pageCount
                            this.pageIndex = res.data.data.pageIndex
                            // console.log(this.devices)
                        })
                },
                handleUpdateClick(id,newStatus){
                    let str = newStatus==1?'启用':'停用';
                    let flag = confirm("请确认是否"+str+"该设备?")
                    if(!flag){
                        return
                    }
                    let data = {
                        id:id,
                        status:newStatus
                    }
                    axios.post('http://localhost:8080/device/update',data)
                    .then(res => {
                        if(res.data.success){
                            this.querydevices()
                        }
                    })
                },
                handlePageClick(page){
                    this.pageIndex = page
                    this.querydevices()
                }
            },
            created(){
                this.loadbuildings()
                this.querydevices()
            }
        })
    </script>
</body>
</html>